<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import BadgeRibbon from "./BadgeRibbon.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import Avatar from "../Avatar/Avatar.svelte";
    import { Space } from "../Space";
    import { Card } from "../Card";
    import type { BadgeRibbonProps } from "./BadgeRibbon";

    const { Story } = defineMeta({
        title: "Components/Navigation/BadgeRibbon",
        component: BadgeRibbon,
        tags: ["autodocs"],
        argTypes: {
            status: {
                control: "select",
                options: ["success", "error", "processing", "warning", "info"],
            },
            align: {
                control: "select",
                options: ["start", "end"],
            },
            color: {
                control: "select",
                options: ["blue", "green", "red", "yellow", "pink", "magenta", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"],
                table: {
                    type: { summary: "string | blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purple" },
                },
            },
            trangleSize: {
                description: "三角徽标占用的尺寸",
                table: {
                    defaultValue: { summary: "100" },
                },
            },
            trangleHeight: {
                description: "三角徽标条带的高度",
                table: {
                    defaultValue: { summary: "28" },
                },
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <BadgeRibbon text="Ribbon">
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
        </Space>
    {/snippet}
</Story>

<Story name="Align" args={{ align: "start" }}>
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <BadgeRibbon text="Ribbon" {...args}>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
            <BadgeRibbon text="Ribbon" trangle {...args}>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
        </Space>
    {/snippet}
</Story>

<Story name="TrangleSize" args={{ trangleSize: 80 }}>
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <BadgeRibbon text="Normal" trangle>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
            <BadgeRibbon text="Ribbon" trangle {...args}>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
        </Space>
    {/snippet}
</Story>

<Story name="TrangleHeight" args={{ trangleHeight: 40 }}>
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <BadgeRibbon text="Normal" trangle>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
            <BadgeRibbon text="Ribbon" trangle {...args}>
                <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
            </BadgeRibbon>
        </Space>
    {/snippet}
</Story>

<Story name="Status">
    {#snippet template(args)}
        <Space dir="h" size={24} wrap>
            {#each ["success", "error", "warning", "primary", "info", "disabled"] as BadgeRibbonProps["status"][] as status}
                <BadgeRibbon text="Ribbon" {status}>
                    <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
                </BadgeRibbon>
            {/each}

            {#each ["success", "error", "warning", "primary", "info", "disabled"] as BadgeRibbonProps["status"][] as status}
                <BadgeRibbon text="Ribbon" {status} trangle>
                    <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
                </BadgeRibbon>
            {/each}
        </Space>
    {/snippet}
</Story>

<Story name="Themes">
    {#snippet template(args)}
        <Space dir="h" size={24} wrap>
            {#each ["blue", "green", "red", "yellow", "pink", "magenta", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as BadgeRibbonProps["color"][] as color}
                <BadgeRibbon text="Ribbon" {color}>
                    <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
                </BadgeRibbon>
            {/each}

            {#each ["blue", "green", "red", "yellow", "pink", "magenta", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as BadgeRibbonProps["color"][] as color}
                <BadgeRibbon text="Ribbon" {color} trangle>
                    <Card title="Card Title" bordered>Card Content 飘带徽标 飘带徽标</Card>
                </BadgeRibbon>
            {/each}
        </Space>
    {/snippet}
</Story>
